<template>
  <!-- 用于存放视图模块 ，必须被一个根div包裹-->
  <Header></Header>
  <div>
    
    <h1>这是一个登录页面</h1>
    用户登录：<input type="text" v-model="loginData.username" /><br />
    密&emsp;&emsp;码：<input
      type="password"
      v-model="loginData.password"
    /><br />
    <!-- &nbsp:一共字符，&ensp;半个汉字；&emsp一个中文汉字 -->
    <el-button type="primary" @click="logining()">登录</el-button>
  </div>
</template>
<script>
// 交互逻辑
import axios from "axios";
import Header from './components/header.vue'
export default {
    components:{Header},
  data() {
    return {
      loginData: {},
    };
  },
  methods: {
    async logining() {
      // 异步请求的操作
      axios.defaults.headers.post["Content-Type"] = "application/json";
      axios({
        url: "http://127.0.0.1:8888/user/login",
        method: "post",
        data: JSON.stringify(this.loginData),
      })
        .then((res) => {
          console.log(this.loginData);
          console.log(res);
          sessionStorage.setItem("token", res.data.data.token);
          this.$message({
            message: "登录成功",
            type: "success",
          });
          this.$router.push({
            path: "/index",
          });
        })
        .catch((error) => {
          console.log(error);
          this.$message.error("用户名或密码错误，请重新输入");
        });
    },
  },
  created() {
    // this.logining();
  },
};
</script>
<!-- 样式 -->
<style>
</style>